<template>
  <template v-for="(element, elementIndex) in columChildData" :key="elementIndex">
    <tr>
      <template v-for="(_item, _index) in fieldList" :key="_item.unique || _index">
        <td v-show="colShow(_item)"
          :class="{
            'border': props.border,
            'show-text-tip': _item?.showTextTip,
            'col-left-fixed': _item?.fixed === 'left',
            'col-right-fixed': _item?.fixed === 'right',
            'right-first-fixed': _item?.rightFirstFixed && !isEndRightVisible,
            'left-last-fixed': _item?.leftLastFixed && isBeforeVisible,
          }"
          :style="_item?.sticktStyle"
        >
          <div class="cell" 
            :title="_item.showTextTip ? showValue(element,_item[tableProps.valueKey]) : null"
            :style="{
              'justify-content': props.textAlign,
              'padding-left': rowKey && _index == 0 ? currentLevel * 14 + 'px' : 'revert-layer',
            }"
          >
            <div class="table-expand-icon-box" v-if="_index == 0 && rowKey" @click.stop="handleExpandChange(element)">
              <svg :class="defaultExpandTree.includes(element[rowKey])?'is-expanded':''"
               v-if="_index == 0 && element?.children?.length" 
               class="icon table-expand-icon" t="1725434223563" 
               viewBox="0 0 1024 1024" version="1.1" 
               xmlns="http://www.w3.org/2000/svg" p-id="8857" 
               width="12" height="12">
               <path d="M819.06 537.471c0.679-1.32 1.869-2.475 2.38-3.8 11.905-24.134 7.993-53.89-13.092-73.23L327.786 18.576C301.598-5.564 260.278-4.403 235.45 21.05c-24.827 25.461-23.634 65.63 2.55 89.768l431.247 396.571-429.55 402.357c-26.013 24.301-26.695 64.47-1.698 89.762 12.753 12.896 29.93 19.504 46.933 19.504 16.325 0 32.652-5.95 45.233-17.85l476.14-446.166c0.85-0.827 1.191-2.149 2.211-2.976 0.68-0.66 1.361-1.157 2.21-1.816 3.913-3.802 5.781-8.429 8.333-12.733m0 0" fill="#060001" p-id="8858"></path></svg>
            </div>
            <!-- 具名插槽 -->
            <slot :name="_item.slot || _item[tableProps.valueKey]" :element="element">
              <span class="unmover" v-html="showValue(element,_item[tableProps.valueKey])"></span>
            </slot>
          </div>
        </td>
      </template>
    </tr>
    <template v-if="element.children?.length">
      <template v-if="defaultExpandTree.includes(element[rowKey])">
        <DragLbTableColumn
          :columChildData="element.children"
          :fieldList="fieldList"
          :isBeforeVisible="isBeforeVisible"
          :isEndRightVisible="isEndRightVisible"
          :border="props.border"
          :textAlign="props.textAlign"
          v-model:defaultExpandTree="defaultExpandTree"
          :row-key="rowKey"
          :childLevel="currentLevel + 1"
          @handleExpandChange="handleExpandChange"
          :tableProps="tableProps"
        >
          <template v-for="(_item, _index) in fieldList" :key="_index" #[_item[tableProps.valueKey]]="{element}" >
            <slot :name="_item[tableProps.valueKey]" :element="element">
              <span class="unmover" v-html="showValue(element,_item[tableProps.valueKey])"></span>
            </slot>
          </template>
        </DragLbTableColumn>
      </template>
    </template>
  </template>
</template>
<script setup name="DragLbTableColumn">
import { computed, nextTick, toRefs } from 'vue'

const props = defineProps({
  columChildData: {
    type: Array,
    default: () => []
  },
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  },
  border: { 
    type: Boolean,
    default: false
  },
  rowKey: { 
    type: String,
  },
  textAlign: { 
    type: String,
    default: 'left'
  },
  isBeforeVisible: { 
    type: Boolean,
    default: false
  },
  isEndRightVisible: { 
    type: Boolean,
    default: false
  },
  childLevel: { 
    type: Number,
    default: 0
  },
  defaultExpandTree: { 
    type: Array,
    default: () => {
      return []
    }
  },
  tableProps: {
    type: Object,
    default: () => {
      return {
        valueKey: 'name',
        labelKey: 'title'
      }
    }
  }
})
const { tableProps ,columChildData, fieldList, childLevel, isBeforeVisible, isEndRightVisible, rowKey } = toRefs(props)
const emits = defineEmits(['update:defaultExpandTree', 'handleExpandChange'])

// 计算当前层级
const currentLevel = computed(() => props.childLevel)

const defaultExpandTree = computed({
  get: () => {
    return props.defaultExpandTree
  },
  set: (val) => {
    emits('update:defaultExpandTree',val)
  }
})
// 未使用插槽时展示默认值
const showValue = (item, keyArr) => {//数组key处理
  if (Object.prototype.toString.call(keyArr) === '[object Array]') {
    for (let i = 0; i < keyArr.length; i++) {
      if (!(item[keyArr[i]] === '' || item[keyArr[i]] === undefined || item[keyArr[i]] === null)) {
        return item[keyArr[i]]
      }
    }
  } else if (Object.prototype.toString.call(keyArr) === '[object String]') {
    return item[keyArr]
  }
}
const colShow = (row) => {
  return (row.show != undefined ? row.show : true) && !row.showOtherPlace
}
// 展开/收起行
const handleExpandChange = (data) => {
  if(defaultExpandTree.value.includes(data.id)){
    nextTick(() => {
      defaultExpandTree.value = defaultExpandTree.value.filter(item => item != data.id)
    });
  }else{
    nextTick(() => {
      defaultExpandTree.value.push(data.id)
    });
  }
  emits('handleExpandChange', data)
}
</script>
<style scoped lang='scss'>
.table-expand-icon-box{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .table-expand-icon{
    width: 8px;
    height: 8px;
    margin: auto;
    transform: rotate(0);
    transition: all 0.3s;
    path{
      fill: #666;
    }
  }
  .is-expanded{
    transform: rotate(90deg);
  }
}

</style>